<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html {
            font-size: 30.4px;
        }

        body {
            background-color: #06164A;
            min-width: 1260px;
        }

        .header {
            width: 100%;
            height: 80px;
            background: url("images/head_bg.png") no-repeat top center;
            background-size: 100% 100%;
            color: white;
            text-align: center;
        }

        .header h1 {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        .header div {
            /* 绝对定位，因父元素无定位，参照浏览器移动 */
            position: absolute;
            top: 0;
            right: 20px;
            height: 60px;
            line-height: 60px;
            color: rgba(255, 255, 255, 0.7);
        }

        .mainbox {
            width: 100%;
            height: 100%;
            padding: 10px;
            background-color: #06164A;
            display: flex;
            /* 弹性盒子 */
        }

        .mainbox>div {
            display: inline-block;
        }

        .mainbox .left {
            /* background-color: red; */
            flex: 1;
            overflow-x: hidden;
        }

        .mainbox .left>div {
            width: 100%;
            height: 260px;
            /* margin-bottom: 10px; */
            /* background-color: wheat; */
        }

        .mainbox .center {
            box-sizing: border-box;
            padding: 0 5px;
            flex: 1.3;
            overflow-x: hidden;
            overflow-y: hidden;
            height: 100%;
        }

        .mainbox .center .student-data {
            width: 100%;
            height: 120.65px;
            padding: 11.867px;
            margin-bottom: 5px;
            background: rgba(101, 132, 226, 0.1);
        }

        .mainbox .center .student-data .data {
            position: relative;
            height: 64px;
            line-height: 64px;
            border: 1px solid rgba(25, 186, 139, 0.17);
        }

        .mainbox .center .student-data .data ul {
            padding: 1.5px;
            text-align: center;
            display: flex;
        }

        .mainbox .center .student-data .data ul::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            top: 0;
            left: 0;
        }

        .mainbox .center .student-data .data ul::after {
            content: "";
            position: absolute;
            width: 30px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            right: 0;
            bottom: 0;
        }

        .mainbox .center .student-data .data ul li {
            position: relative;
            color: #ffeb7b;
            font-size: 55px;
            font-weight: 600;
            flex: 1;
        }

        .mainbox .center .student-data .data ul li:first-child::after {
            content: "";
            position: absolute;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
            right: 0;
            top: 25%;
        }

        .mainbox .center .student-data .text ul {
            padding-top: 7.5px;
            text-align: center;
            display: flex;
        }

        .mainbox .center .student-data .text ul li {
            color: rgba(255, 255, 255, 0.7);
            flex: 1;
        }

        .mainbox .center .map {
            width: 100%;
            height: 641px;
            /* background-color: orchid; */
            position: relative;
        }

        /* 背景图片 */
        .map .map1 {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 62px;
            top: 55px;
        }

        .map1 img {
            width: 480px;
            opacity: 0.4;
        }


        .map .map2 {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 41px;
            top: 35px;
        }

        .map2 img {
            width: 508px;
        }

        .map .map3 {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 86px;
            top: 79px;
        }

        .map3 img {
            width: 435px;
            opacity: 0.3;

        }

        .mainbox .right {
            /* background-color: red; */
            flex: 1;
            overflow-x: hidden;
        }

        .mainbox .right>div {
            width: 100%;
            height: 260px;
            /* margin-bottom: 10px; */
            /* background-color: wheat; */
        }

        /* fy左一左二样式 以下 */
        .panel {
            position: relative;
            height: 3.875rem;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png);
            padding: 0 0.1875rem 0.5rem;
            margin-bottom: 0.1875rem;
        }

        .panel::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .panel::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .panel .panel-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            /* height:-20%; */
            z-index: 0;
        }

        .panel .panel-footer::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .panel .panel-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .panel h2 {
            /* height: 0.6rem;
            line-height: 0.6rem; */
            height: 0.1rem;
            line-height: 0.29rem;
            text-align: center;
            color: #fff;
            font-size: 0.16rem;
            font-weight: 400;
        }

        /* fy左一左二样式 以上 */

        /* zr左三右一 以下*/
        .mainbox .left .pie {
            overflow: hidden;
        }

        .pie h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.25rem;
            font-weight: 400;
        }

        .bar h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.25rem;
            font-weight: 400;
        }

        .mainbox .left .pie {
            position: relative;
            height: 260px;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url('images/line\(1\).png');
            padding: 0 0.1875rem 0.5rem;
            margin-bottom: 0.1875rem;
        }

        .mainbox .right .bar {
            position: relative;
            height: 260px;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url('images/line\(1\).png');
            padding: 0 0.1875rem 0.5rem;
            margin-bottom: 0.1875rem;
        }

        .left .pie::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .left .pie::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .left .pie .pie-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .left .pie .pie-footer::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .left .pie .pie-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .bar::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .bar::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .bar .bar-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .right .bar .bar-footer::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .bar .bar-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        /* zr左三右一 以上 */

        /* yzj_右2右3的样式 以下 */
        .mainbox .right .pie {
            overflow: hidden;
        }

        .mainbox .right .line {
            overflow: hidden;
        }

        .mainbox .right .line {
            position: relative;
            height: 260px;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url('images/line\(1\).png');
            padding: 0 0.1875rem 0.5rem;
            margin-bottom: 0.1875rem;
        }

        .mainbox .right .pie {
            position: relative;
            height: 260px;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url('images/line\(1\).png');
            padding: 0 0.1875rem 0.5rem;
            margin-bottom: 0.1875rem;
        }

        .right .line h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.25rem;
            font-weight: 400;
        }

        .right .pie h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.25rem;
            font-weight: 400;
        }

        .right .line::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .line::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .line .line-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .right .line .line-footer::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .line .line-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .pie::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .pie::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .pie .pie-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .right .pie .pie-footer::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            border-radius: 20%;
        }

        .right .pie .pie-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            border-radius: 20%;
        }

        /*yzj_右2右3的样式 以上*/
    </style>
    <script src="js/echarts.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/china.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //显示当前时间
            window.requestAnimationFrame(getDate)
            // 网页加载完成后即运行rotate函数
            rotate('map1');
            rotate('map2');
        }


        // 获取时间的函数
        function getDate() {
            window.setTimeout(function () {
                window.requestAnimationFrame(getDate)
            }, 1000 / 2)
            var date = new Date();
            var year = date.getFullYear() //获取年
            var month = date.getMonth() + 1; //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
            var day = date.getDate() //获取日
            // var xingqi = date.getDay()  //获取星期几
            var hour = date.getHours() //获取小时
            var minute = date.getMinutes() //获取分钟
            var second = date.getSeconds() //获取秒

            /* 日期或时间为单个数字时补0 */
            if (month < 10) month = "0" + month
            if (day < 10) day = "0" + day
            if (hour < 10) hour = "0" + hour
            if (minute < 10) minute = "0" + minute
            if (second < 10) second = "0" + second

            var current_time = document.getElementById("current-time")
            var now = "当前时间：" + year + "年" + month + "月" + day + "日" + "-" + hour + "时" + minute + "分" + second + "秒"
            current_time.innerHTML = now
        }

        var rotateVal = 0

        function rotate(id) {
            InterVal = setInterval(function () {
                var img = document.getElementById(id)
                // console.log(id);
                rotateVal += 1
                // 设置旋转属性(顺时针)
                if (id == 'map2')
                    img.style.transform = 'rotate(' + rotateVal + 'deg)'
                // 设置旋转属性(逆时针)
                if (id == 'map1')
                    img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                // 设置旋转时的动画  匀速0.1s
                img.style.transition = '0.5s linear'
            }, 100)
        }
    </script>
</head>

<body>
    <div class="header">
        <h1>大数据智慧校园云平台</h1>
        <div class="current-time" id="current-time"></div>
    </div>
    <div class="mainbox">
        <div class="left">
            <div class="panel" style="width:37s0px;padding-left:0px">
                <canves class="bar" style="z-index:1000!important;width:370.5px;height:90%;">
                    <h2 style="width:100%;height:20px;z-index:1001;" id="aa">
                        各学院学生数量
                    </h2>
                    <div class="chart" style=" width:100%;height:90%;padding-top:25px;z-index:1000"></div>
                    <div class="panel-footer"></div>
                </canves>
            </div>
            <div class="panel line">
                <h2>折线图-学习变化</h2>
                <div class="chart" style=" width: 100%;height:100%;padding-top:25px;z-index:1000"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="pie">
                <h2>饼形图-教师分布</h2>
                <div id="table1" style="width: 100%;height: 180px;z-index: 1000;"></div>
                <div class="pie-footer"></div>
            </div>
        </div>
        <div class="center">
            <div class="student-data">
                <div class="data">
                    <ul>
                        <li>123456</li>
                        <li>7890</li>
                    </ul>
                </div>
                <div class="text">
                    <ul>
                        <li>在校大学生人数</li>
                        <li>在上课学生人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <!-- map1,map2存放背景图 -->
                <div class="map3"><img src="images/map.png" alt=""></div>
                <div class="map1"><img src="images/jt.png" alt="" id="map1"></div>
                <div class="map2"><img src="images/lbx.png" alt="" id="map2"></div>
                <div id="map" style="width: 100%; height:100%"></div>
            </div>
        </div>
        <div class="right">
            <div class="bar">
                <h2>柱状图-开发技能</h2>
                <div id="table2" style="width: 100%;height:180px;"></div>
                <div class="bar-footer"></div>
            </div>
            <div class="line">
                <h2>折线图-人员流动</h2>
                <div id="chart2" style="width: 100%;height: 90%;z-index: 1000;"></div>
                <div class="line-footer"></div>
            </div>
            <div class="pie">
                <h2>饼形图-各地区学生占比</h2>
                <div id="chart3" style="width: 100%;height: 90%;z-index: 1000;"></div>
                <div class="pie-footer"></div>
            </div>
        </div>
    </div>
</body>

<script>
    // 柱状图1模块
    (function () {
        // 实例化对象
        var myChart = echarts.init(document.querySelector(".bar .chart"));
        // 指定配置和数据
        var option = {
            // title:'qqq',
            // color: ["#2f89cf"],
            color: ["#00f2f1", "#ed3f35"],
            legend: {
                data1: ['2019'],
                data2: ['2020'],
                textStyle: {
                    color: "#4c9bfd"
                },
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                },
                position: ['70%', '95%']
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: [
                    "管理",
                    "外语",
                    "工商",
                    "生物",
                    "计算机",
                    "机械",
                    "国际"
                ],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: "value",
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                        // width: 1,
                        // type: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }],

            series: [{
                    name: '2019',
                    type: 'bar',
                    data: [200, 300, 300, 900, 1500, 1200, 600],
                },
                {
                    name: '2020',
                    type: 'bar',
                    data: [300, 400, 350, 800, 1800, 1400, 700],
                }
            ]
        };

        myChart.setOption(option);
    })();

    // 折线图定制
    (function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".line .chart"));

        // (1)准备数据
        var data = {
            year: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        };

        // 2. 指定配置和数据
        var option = {
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis",
                position: ['70%', '99%']
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name，此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [{
                    name: "新增项目",
                    type: "line",
                    stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    data: data.year[0]
                },
                {
                    name: "新增技能",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[1]
                }
            ]
        };
        // 3. 把配置和数据给实例对象
        myChart.setOption(option);

        // 重新把配置好的新数据给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    })();
</script>
<script src="js/map.js"></script>

<!-- zr的js 以下 -->
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('table1'));
    var option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [{
            name: "年龄分布",
            type: "pie",
            center: ["50%", "42%"],
            radius: ["40%", "60%"],
            color: [
                "#065aab",
                "#066eab",
                "#0682ab",
                "#0696ab",
                "#06a0ab",
                "#06b4ab",
                "#06c8ab",
                "#06dcab",
                "#06f0ab"
            ],
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            data: [{
                    value: 1,
                    name: "0岁以下"
                },
                {
                    value: 4,
                    name: "20-29岁"
                },
                {
                    value: 2,
                    name: "30-39岁"
                },
                {
                    value: 2,
                    name: "40-49岁"
                },
                {
                    value: 1,
                    name: "50岁以上"
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var myChart = echarts.init(document.getElementById('table2'));

    var data = [90, 80, 75, 65, 65];
    var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
    var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var option = {
        //图标位置
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
        },
        xAxis: {
            show: false
        },
        yAxis: [{
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",

                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 15,
                            // padding: 5,
                            align: "center",
                            width: 15,
                            height: 15
                        }
                    }
                }
            },
            {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [{
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: 50,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: "inside",
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barCategoryGap: 50,
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
<!-- zr的js 以上 -->

<!-- yzj_右2右3的js 以下-->
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('chart2'));
    option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            },
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },

        xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                },

                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                    "25",
                    "26",
                    "27",
                    "28",
                    "29",
                    "30"
                ]
            },
            {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                position: "bottom",
                offset: 20
            }
        ],

        yAxis: [{
            type: "value",
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },

            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
                name: "流入",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#0184d5",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [
                    30,
                    40,
                    30,
                    40,
                    30,
                    40,
                    30,
                    60,
                    20,
                    40,
                    20,
                    40,
                    30,
                    40,
                    30,
                    40,
                    30,
                    40,
                    30,
                    60,
                    20,
                    40,
                    20,
                    40,
                    30,
                    60,
                    20,
                    40,
                    20,
                    40
                ]
            },
            {
                name: "流出",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: [
                    50,
                    30,
                    50,
                    60,
                    10,
                    50,
                    30,
                    50,
                    60,
                    40,
                    60,
                    40,
                    80,
                    30,
                    50,
                    60,
                    10,
                    50,
                    30,
                    70,
                    20,
                    50,
                    10,
                    40,
                    50,
                    30,
                    70,
                    20,
                    50,
                    10,
                    40
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
    window.addEventListener("resize", function () {
        myChart1.resize();
    });
    var myChart = echarts.init(document.getElementById('chart3'));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }

        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [{
            name: "点位统计",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [{
                    value: 20,
                    name: "西安"
                },
                {
                    value: 26,
                    name: "北京"
                },
                {
                    value: 24,
                    name: "上海"
                },
                {
                    value: 25,
                    name: "其他"
                },
                {
                    value: 20,
                    name: "武汉"
                },
                {
                    value: 25,
                    name: "杭州"
                },
                {
                    value: 30,
                    name: "深圳"
                },
                {
                    value: 42,
                    name: "广州"
                }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
                fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
                // 连接到图形的线长度
                length: 10,
                // 连接到文字的线长度
                length2: 10
            }
        }]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
</script>
<!-- yzj_右2右3的js 以上 -->

</html>